html,body{
    margin: 0;
    padding: 0;
    background-color: #000000;
}
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
div{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotateX(70deg) rotateY(-30deg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 30px #fff;
    transform-style: preserve-3d;
}
div:nth-child(1){
    width: 300px;
    height: 300px;
}
div:nth-child(2){
    width: 600px;
    height: 600px;
}
div:nth-child(3){
    width: 900px;
    height: 900px;
}
div:nth-child(4){
    width: 800px;
    height: 800px;
    transform: rotateX(70deg) rotateY(-70deg);
}
div ul{
    position: relative;
    transform-style: preserve-3d;
}

div:nth-child(2){
    animation: move2 15s linear infinite;
}
div:nth-child(3){
    animation: move2 20s linear infinite;
}
div:nth-child(4){
    animation: move3 18s linear infinite;
}

div:nth-child(1) ul {
    width: 200px;
    height: 200px;
    animation: move1 10s linear infinite;
}
div:nth-child(2) ul {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 0;
    margin-top: -40px;
    margin-left: -40px;
    animation: move1 12s linear infinite;
}
div:nth-child(3) ul {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 0;
    margin-top: -30px;
    margin-left: -30px;
    animation: move1 14s linear infinite;
}

div:nth-child(4) ul {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 50%;
    top: 0;
    margin-top: -35px;
    margin-left: -35px;
    animation: move1 16s linear infinite;
}

div ul li{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

div:nth-child(1) ul li {
    box-shadow: 0px 0px 50px orange;
}
div:nth-child(2) ul li {
    box-shadow: 0px 0px 50px blue;
}
div:nth-child(3) ul li {
    box-shadow: 0px 0px 50px rgb(96, 197, 55);
}
div:nth-child(4) ul li {
    box-shadow: 0px 0px 50px rgb(44, 218, 224);
}


div ul li:nth-child(1){
    transform: rotateY(20deg);
 
}
div ul li:nth-child(2){
    transform: rotateY(40deg);
}
div ul li:nth-child(3){
    transform: rotateY(60deg);
}
div ul li:nth-child(4){
    transform: rotateY(80deg);
}
div ul li:nth-child(5){
    transform: rotateY(100deg);
}
div ul li:nth-child(6){
    transform: rotateY(120deg);
}
div ul li:nth-child(7){
    transform: rotateY(140deg);
}
div ul li:nth-child(8){
    transform: rotateY(160deg);
}
div ul li:nth-child(9){
    transform: rotateY(180deg);
}


div ul li:nth-child(10){
    transform: rotateX(20deg);
}
div ul li:nth-child(11){
    transform: rotateX(40deg);
}
div ul li:nth-child(12){
    transform: rotateX(60deg);
}
div ul li:nth-child(13){
    transform: rotateX(80deg);
}
div ul li:nth-child(14){
    transform: rotateX(100deg);
}
div ul li:nth-child(15){
    transform: rotateX(120deg);
}
div ul li:nth-child(16){
    transform: rotateX(140deg);
}
div ul li:nth-child(17){
    transform: rotateX(160deg);
}
div ul li:nth-child(18){
    transform: rotateX(180deg);
}

/* 自转 */
@keyframes move1{
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}

/* 公转1 */
@keyframes move2{
    from{
        transform:rotateX(70deg) rotateY(-30deg) rotateZ(0deg);
    }
    to{
        transform: rotateX(70deg) rotateY(-30deg) rotateZ(360deg);
    }
}

/* 公转2 */
@keyframes move3{
    from{
        transform:rotateX(70deg) rotateY(-60deg) rotateZ(0deg);
    }
    to{
        transform: rotateX(70deg) rotateY(-60deg) rotateZ(360deg);
    }
}